---
title: Icon
description: A component for displaying scalable vector icons.
metaDescription: Icon component for React and Solid.js displaying scalable vector icons with consistent sizing. Integrate with popular icon libraries for visual enhancements.
category: data-display
links:
  recipe: https://github.com/cschroeter/park-ui/blob/next/packages/preset/src/recipes/icon.ts
---

<ComponentExample name="basic" />

## Installation

<InstallationGuide />

## Usage

```tsx
import { Icon } from '@/components/ui'
```

```tsx
<Icon />
```

## Examples

### Icon Library

Integrate with popular icon sets such as [Lucide](https://lucide.dev/)

<ComponentExample name="lucide" />

### Sizes

Use the `size` prop to change the size of the icon.

<ComponentExample name="sizes" />

### Custom svg

Render custom SVG icons by passing SVG elements as children to the `Icon` component.

<ComponentExample name="custom" />

## Props

<PropsTable />